<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div class="about-us" v-show="show">
      <div class="content">
        <div class="userInfo">
          <!--<div class="headBg"></div>-->
          <img :src="user_info.headimg" @click="personalInfo">
          <p>{{user_info.nickname}}</p>
          <!--<p>A00001</p>-->
        </div>
        <div class="list">
          <div class="row" @click="aboutus">
            <img src="../assets/image/aboutus.png">
            <span>关于我们</span>
          </div>
          <div class="row" v-if="user_info.user_role === '员工'" @click="menu('我的订单')">
            <img src="../assets/image/mine_wddd.png">
            <span>我的订单</span>
            <i class="new" v-if="user_info.finish_order_num !== '0'"></i>
            <i class="status" v-if="user_info.finish_order_num !== '0'">已完成{{user_info.finish_order_num}}单</i>
          </div>
          <div class="row" @click="menu('我的服务')">
            <img src="../assets/image/mine_btn_wdfw.png">
            <span>我的服务</span>
          </div>
          <div class="row" @click="mypurse">
            <img src="../assets/image/mine_btn_wdqb.png">
            <span>我的钱包</span>
          </div>
          <div class="row" v-if="user_info.user_role !== '快递员'" @click="eval('我的评价')">
            <img src="../assets/image/issuedeva.png">
            <span>我的评价</span>
          </div>
          <div class="row" v-if="user_info.user_role === '员工'" @click="eval('收到的评价')">
            <img src="../assets/image/receivedeva.png">
            <span>收到的评价</span>
          </div>
          <div class="row" @click="mycard">
            <img src="../assets/image/mine_btn_wdkq.png">
            <span>我的卡券</span>
          </div>
          <div class="row" @click="messagecenter">
            <img src="../assets/image/mine_btn_wdxx.png">
            <span>我的消息</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'PersonalCenter',
    data () {
      return {
        show: false,
        user_info: {}
      }
    },
    methods: {
      aboutus: function () {
        this.$router.push('AboutUs')
      },
      personalInfo: function () {
        this.$router.push('PersonalInfo')
      },
      mypurse: function () {
        this.$router.push('MyPurse')
      },
      messagecenter: function () {
        this.$router.push('MessageCenter')
      },
      mycard: function () {
        this.$router.push('MyCard')
      },
      menu: function (title) {
        window.location.href = '#/MyMenu?title=' + encodeURI(title)
      },
      eval: function (title) {
        window.location.href = '#/Evaluation?title=' + encodeURI(title)
      },
      verify: function () {
        var thisObj = this
        this.$chaos.setTitle('个人中心')
        this.$store.commit('headerShow', false)
        this.$store.commit('footerShow', false)
        this.$chaos.verify(function () {
          thisObj.$chaos.ajax({
            slient: true,
            userinfo: true,
            url: 'User/getUserData',
            callback: function (type, res) {
              if (res.status === 'SUCCESS') {
                thisObj.user_info = res.result.user_info
                thisObj.show = true
              } else {
                thisObj.show = true
                thisObj.$vux.toast.show({
                  text: res.result.msg,
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
              }
            }
          })
        })
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  [v-cloak] {
    display: block;
  }
  .content {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
    font-size:16px;
  }
  .userInfo {
    background: url(../assets/image/wdye_bg.png);
    background-size: 100% 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    position: relative;
  }
  .userInfo .headBg {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    margin: 10px auto;
  }
  .userInfo img {
    width: 54px;
    height: 54px;
    display: block;
    margin: 3px auto 10px;
    z-index: 2;
    border-radius: 50%;
    border: 2px solid #dec48a;
  }
  .userInfo p {
    text-align: center;
    color: rgba(240,240,240,0.8);
    height: 25px;
    line-height: 25px;
  }
  .list .row:first-child {
    margin-top: 10px;
  }
  .list .row img {
    width: 18px;
    height: 18px;
    display: block;
    position: absolute;
    top: 11px;
    left: 15px;
  }
  .list .row span {
    margin-left: 44px;
    font-size:15px;
  }
  .list .row .new {
    width: 5px;
    height: 5px;
    background: #f11;
    border-radius: 3px;
    display: block;
    position: absolute;
    left: 114px;
    top: 17px;
  }
  .list .row .status {
    color: #f11;
    font-style: normal;
    font-size: 12px;
    float: right;
    margin-right: 15px;
  }
  .list .row:first-child {
    margin-top: 10px;
  }
  .list .row {
    position: relative;
    height: 40px;
    line-height: 40px;
  }
</style>
